<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/logIn.css" />
    <link rel="icon" href="img/logo2.png" type="image/x-icon" />
    <style>
      #i {
        transition: all 0.618s;
        opacity: 61.8%;
      }
      #i:hover {
        opacity: 100%;
      }
    </style>
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <img src="img/logo2.png" />
      <div class="title">未登录</div>
      <div class="space"></div>

      <a id="login" href="blog_login.html">登录</a>
    </div>
    <!-- 登录页面 -->

    <div class="login-Container">
      <div class="dialog" style="height: 550px">
        <h3>注册</h3>

        <div id="fileImage">
          <input
            id="i"
            type="button"
            value="请上传头像"
            onclick="putImage();"
          />
          <input id="f_file" type="file" name="file" style="display: none" />
        </div>

        <div class="row">
          <label for="username">昵称</label>
          <input type="text" id="username" name="name" />
        </div>
        <div class="row">
          <label for="git">代码仓库链接</label>
          <input type="text" id="git" name="git" />
        </div>

        <div class="row">
          <label for="password">密码</label>
          <input type="password" id="password" />
        </div>
        <div class="row">
          <label for="judge_password">确认密码</label>
          <input type="password" id="judge_password" />
        </div>
        <div class="r">
          <input type="button" id="submit" value="注册" onclick="register()" />
        </div>
      </div>
    </div>

    <script>
      function init() {
        jQuery.ajax({
          method: "get",
          url: "/user/is_login",
          success: function (body) {
            if (body.code == 200 && body.data == true) {
              jQuery("#icon").attr("href", "img/logo1.png");
              jQuery(".navigation img").attr("src", " img/logo1.png");
              jQuery(".title").text("我的博客系统");
              var newA = '<a href="blog_lists.html">主页</a>';
              newA += '<a href="myblog_lists.html">我的博客</a>';
              newA += '<a href="blog_add.html">写博客</a>';
              newA += '<a href="/user/logout">退出登录</a>';
              jQuery(".navigation").append(jQuery(newA));
            }
          },
        });
      }
      init();

      function putImage() {
        javascript: jQuery("input[name='file']").click();
      }

      jQuery("#f_file").change(function (e) {
        // 获取选中的文件
        var file = e.target.files[0];
        // 创建一个 FormData 对象
        var formData = new FormData();
        formData.append("myfile", file);
        // 用 Ajax 向服务器发送文件
        jQuery.ajax({
          url: "/user/picture",
          type: "POST",
          data: formData,
          processData: false, // 告诉 jQuery 不要处理发送的数据
          contentType: false, // 告诉 jQuery 不要设置 Content-Type 请求头
          success: function (res) {
            if (res.code == 200) {
              var url = "url(" + res.data + ")";
              jQuery("#i").css("background-image", url);
              jQuery("#i").val("");
            } else {
              console.log("上传失败: " + res.msg);
            }
          },
          error: function (body) {
            location.href = location.href;
          },
        });
      });

      function register() {
        var name = jQuery("#username");
        var password = jQuery("#password");
        var judge_password = jQuery("#judge_password");
        var photo = jQuery("#i")
          .css("background-image")
          .replace("url(", "")
          .replace(")", "")
          .replace('"', "")
          .replace('"', "");
        var git = jQuery("#git");

        // 1. 非空校验
        if (name.val().trim() == "") {
          alert("请输入昵称！");
          name.focus();
          return false;
        }
        if (password.val().trim() == "") {
          alert("请输入密码！");
          password.focus();
          return false;
        }
        if (judge_password.val().trim() == "") {
          alert("请输入密码！");
          judge_password.focus();
          return false;
        }
        if (password.val() != judge_password.val()) {
          alert("两次输入密码不一致！");
          return false;
        }
        // 2. 发送请求
        jQuery.ajax({
          url: "/user/register",
          method: "POST",
          contentType: "application/json; charset=utf8",
          data: JSON.stringify({
            name: name.val().trim(),
            password: password.val().trim(),
            photo: photo,
            git: git.val(),
          }),
          // 3. 处理响应
          success: function (body) {
            if (body.code == 200 && body.data.rows == 1) {
              alert(
                "注册成功，请记住你的用户名：" + body.data.username + " ！"
              );
              location.href = "blog_login.html?username=" + body.data.username;
            } else {
              alert("注册失败：" + data.msg);
            }
          },
          error: function (body) {
            location.href = location.href;
          },
        });
      }
    </script>
  </body>
</html>
